<template>
  <div style="overflow: hidden;">
    <el-row style="margin-top: 21%; padding-bottom: 25px;">
      <el-col class="flex justify-center font-bold text-3xl text-black-500">
        注册新用户
      </el-col>
      <el-col class="flex justify-center text-ms text-gray-500" style="padding-top: 10px;">
        请填写下方信息
      </el-col>
    </el-row>
    <el-row>
      <el-col class="flex justify-center">
        <el-form :rules="rules" ref="formRef" :model="form" style="width: 75%;" @validate="onValidate">
          <el-form-item prop="qymc">
            <el-input v-model="form.qymc" :maxlength="16" placeholder="请输入企业名称" clearable>
              <template #prefix>
                <el-icon><OfficeBuilding /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="fzr">
            <el-input v-model="form.fzr" :maxlength="6" placeholder="请输入企业负责人" clearable>
              <template #prefix>
                <el-icon><Avatar /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="fzrtel">
            <el-input v-model="form.fzrtel" :maxlength="11" placeholder="请输入电话号码" clearable>
              <template #prefix>
                <el-icon><Iphone /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="addr">
            <el-input v-model="form.addr" placeholder="请输入企业详细地址" clearable>
              <template #prefix>
                <el-icon><Location /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="form.username" :maxlength="6" placeholder="请输入用户名" clearable>
              <template #prefix>
                <el-icon><user/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" show-password v-model="form.password" placeholder="请输入密码" clearable>
              <template #prefix>
                <el-icon><lock/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input type="password" show-password v-model="form.repassword" placeholder="请确认密码" clearable>
              <template #prefix>
                <el-icon><lock/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="form.email" placeholder="邮箱地址" clearable>
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="authCode">
            <el-row :gutter="3">
              <el-col :span="16">
                <el-input v-model="form.authCode" :maxlength="6" placeholder="输入邮箱验证码" clearable>
                  <template #prefix>
                    <el-icon><EditPen /></el-icon>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="3">
                <el-button type="success" :disabled="!isEmailValid || coldTime > 0" @click="validateEmail">
                  {{coldTime > 0? '请稍后' + coldTime + '秒': '获取验证码'}}
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button round class="w-[295px]"  type="warning" @click="register" plain>立即注册</el-button>
          </el-form-item>
          <el-row>
            已有账号？<el-link type="primary" @click="router.push('/')">点击立即登录</el-link>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import {post, postForm} from "@/utils/axiosMethod.js";

const form = reactive({
  username: '',
  password: '',
  repassword: '',
  email: '',
  authCode: '',
  addr: '',
  fzr:'',
  qymc: '',
  fzrtel: ''
})
const formRef = ref(null)
const coldTime = ref(0)
const validateUsername = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('用户名不能为空'))
  } else if(!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
    callback(new Error('用户名只能是中英文，不能有特殊字符!'))
  } else if (value.length < rule.min){
    callback(new Error(`用户名不能少于 ${rule.min} 个字符`))
  } else if (value.length > rule.max){
    callback(new Error(`用户名不能多于 ${rule.max} 个字符`))
  } else {
    callback()
  }
}
const validateRepassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请重新再输入密码'))
  } else if (value !== form.password) {
    callback(new Error("两次输入的密码不相符!"))
  } else {
    callback()
  }
}
const validatePhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不能为空'))
  } else if(!/^1[3456789]\d{9}$/.test(value)) {
    callback(new Error('手机号格式不正确!'))
  } else {
    callback()
  }
}
const isEmailValid = ref(false)
const onValidate = (prop, isValid)=> {
  if (prop === 'email') {
    isEmailValid.value = isValid
  }
}
const rules = reactive({
  username: [{
    validator: validateUsername,
    trigger: ['blur', 'change'],
    min: 2,
    max: 6,
  },],
  password: [{
    required: true,
    message: '密码不能为空',
    trigger: ['blur', 'change'],
  },],
  repassword: [{
    validator: validateRepassword,
    trigger: ['blur', 'change'],
  },],
  fzrtel: [{
    validator: validatePhone,
    trigger: ['blur', 'change'],
  },],
  email: [{
    required: true,
    type: 'email',
    message: '请输入正确的邮箱地址！',
    trigger: ['blur', 'change'],
  },],
  authCode: [{
    required: true,
    message: '验证码不能为空',
    trigger: 'blur',
  },],
  fzr: [{
    required: true,
    message: '负责人不能为空',
    trigger: 'blur',
  },],
  qymc: [{
    required: true,
    message: '企业名称不能为空',
    trigger: 'blur',
  },],
  addr: [{
    required: true,
    message: '地址不能为空',
    trigger: 'blur',
  },],
})
const register = () => {
  formRef.value.validate((isValid)=> {
    if (isValid) {
        post('/api/auth/register', {
          username: form.username,
          kl: form.password,
          email: form.email,
          code: form.authCode,
          qymc: form.qymc,
          addr: form.addr,
          fzr: form.fzr,
          fzrtel: form.fzrtel
        }, (message)=> {
          ElMessage.success(message)
          router.push("/")
        })
    } else {
      ElMessage.warning("请检查所填写的内容！")
    }
  })
}
const validateEmail = ()=> {
  coldTime.value = 60
  postForm('/api/auth/valid-register-email', {
    email: form.email
  }, (message)=> {
    ElMessage.success(message)
    setInterval(()=> coldTime.value--, 1000)
  }, (message)=> {
    ElMessage.warning(message)
    coldTime.value = 0
  })
}
</script>

<style scoped>

</style>